<template>
  <div class="serve">
    <!-- 头部 -->
    <HeadPersonal></HeadPersonal>

    <!-- enroll -->
    <div class="enroll">
      <!-- enrollPwdOne -->
      <div class="enrollPwdOne">
        <div class="block">
          <div class="enrollPwdOneC">
            <input type="text" placeholder="请输入已验证手机号" class="enrollPwdOneCinput" v-model="phone" />
            <button class="enrollPwdOneCY" @click="verify">
              <img src="../../static/images/enrollPwdOneCY.png" />点击进行验证
            </button>
            <div class="enrollPwdOneCsub" @click="next">下一步</div>
            <!-- <input type="submit" value="" class="enrollPwdOneCsub"/> -->
          </div>
        </div>
      </div>
    </div>

    <!-- 底部 -->
    <HomeHooter></HomeHooter>
  </div>
</template>

<script>
import $ from "jquery";
import "@/assets/css/home.css";
import "@/assets/css/personal.css";
import HeadPersonal from "@/components/headpersonal";
import HomeHooter from "@/components/footer";

export default {
  name: "enroll",
  data() {
    return {
      phone: ""
    };
  },
  components: {
    HeadPersonal,
    HomeHooter
  },
  methods: {
    // 验证
    verify() {
      var reg = /^1[3|5|7|8]\d{9}$/g;
      if (this.phone === "") {
        this.$message({
          message: "请输入已验证手机号",
          type: "warning"
        });
        return false;
      }
      if (!reg.test(this.phone)) {
        this.$message({
          message: "请填写正确的手机号",
          type: "warning"
        });
        return false;
      }
      let id = this.$axios;
      const params = new URLSearchParams();
      params.append("phone", this.phone);
      this.$api.member.sendUpdatePasswordCode(id, params).then(res => {
        let result = res.data;
        if (result.code === 1) {
          this.$message({
            message: result.msg,
            type: "success"
          });
          this.$router.push({
            name: "enroll-enrollPwdTwo",
            query: { phone: this.phone }
          });
        } else {
          this.$message({
            message: result.msg,
            type: "warning"
          });
        }
      });
    },

    // 下一步
    next() {
      var reg = /^1[3|5|7|8]\d{9}$/g;
      if (this.phone === "") {
        this.$message({
          message: "请输入已验证手机号",
          type: "warning"
        });
        return false;
      }
      if (!reg.test(this.phone)) {
        this.$message({
          message: "请填写正确的手机号",
          type: "warning"
        });
        return false;
      }
      this.$router.push({
        name: "enroll-enrollPwdTwo",
        query: { phone: this.phone }
      });
    }
  }
};
</script>

<style scoped>
</style>